<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <title>新鲜水果</title>
    <link rel="stylesheet" type="text/css" href="../css/aui.css"/>
    <link rel="stylesheet" type="text/css" href="../css/api.css"/>
    <style>
    	.list-view {
				display: -webkit-box;
				display: box;
				padding: 5px;
			}
			.list-view li {
				-webkit-box-flex: 1;
				box-flex: 1;
				margin: 0 5px;
				border: 1px solid #dfdfdf;
				padding: 5px;
			}
			.list-view li img {
				width: 100%;
			}
			.list-view li p {
				color: #333;
				font-size: 14px;
			}
			.list-view li span {
				color: #ff4040;
				font-size: 16px;
			}
        #header .aui-tab-nav {
            background-color: rgb(242,242,242);
        }
        #header .actives {
            color: #666;
            border-bottom: 3px solid #6ac82c;
        }
    </style>
</head>
<body>
<header id="header" class="aui-bar aui-bar-nav">
    <a class="aui-pull-left" id="back" onclick="back()"> <span class="aui-iconfont aui-icon-left"></span> </a>
    <div class="aui-title">
        新鲜水果
    </div>
    <div class="aui-tab">
        <ul class="aui-tab-nav" id="demo1">
            <li id="navbar1" class="actives">
                全部
            </li>
            <li id="navbar2" onclick="openP2()">
                进口水果
            </li>
            <li id="navbar3" onclick="openP3()">
                国产水果
            </li>
        </ul>
    </div>
</header>
<div id="top-div"></div>
	<ul class="list-view">
			<li>
				<img src="../image/img1.png" />
				<p>
					甜旅精选智利青苹果
				</p>
				<span>￥19.9</span>
			</li>
			<li>
				<img src="../image/img2.png" />
				<p>
					甜旅精选智利青苹果
				</p>
				<span>￥19.9</span>
			</li>
		</ul>
		<ul class="list-view">
			<li>
				<img src="../image/img3.png" />
				<p>
					甜旅精选智利青苹果
				</p>
				<span>￥19.9</span>
			</li>
			<li>
				<img src="../image/img4.png" />
				<p>
					甜旅精选智利青苹果
				</p>
				<span>￥19.9</span>
			</li>
		</ul>
		<ul class="list-view">
			<li>
				<img src="../image/img5.png" />
				<p>
					甜旅精选智利青苹果
				</p>
				<span>￥19.9</span>
			</li>
			<li>
				<img src="../image/img6.png" />
				<p>
					甜旅精选智利青苹果
				</p>
				<span>￥19.9</span>
			</li>
		</ul>
		<ul class="list-view">
			<li>
				<img src="../image/img7.png" />
				<p>
					甜旅精选智利青苹果
				</p>
				<span>￥19.9</span>
			</li>
			<li>
				<img src="../image/img8.png" />
				<p>
					甜旅精选智利青苹果
				</p>
				<span>￥19.9</span>
			</li>
		</ul>
</body>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript" src="../script/zepto.min.js"></script>
<script type="text/javascript">

	$('.list-view li').click(function(){
        window.location.href = '../html/detail.html'
	});
    function back(){
        window.location.href = '../html/frame_tab_2.html'
    }
	function openP2(){
        window.location.href = '../html/product_tab2.html'
    }
    function openP3(){
        window.location.href = '../html/product_tab3.html'
    }
</script>
</html>